<template>
  <div class="dashboard-container">

    <el-row :gutter="20" class="mgb20">
      <el-col :span="8">
    	  <el-card>
    		  <div class="grid-content">
    			  <div class="grid-num">{{Countlist.teachercount}}</div>
    			  <div>讲师数量</div>
    		  </div>
    	  </el-card>
      </el-col>
      <el-col :span="8">
    	  <el-card>
    		  <div class="grid-content">
    			  <div class="grid-num">{{Countlist.subjectcount}}</div>
    			  <div>现有课程</div>
    		  </div>
    	  </el-card>
      </el-col>
      <el-col :span="8">
    	  <el-card>
    		  <div class="grid-content">
    			  <div class="grid-num">{{Release}}</div>
    			  <div>课程数量</div>
    		  </div>
    	  </el-card>
      </el-col>

    </el-row>


    <el-row :gutter="20" class="mgb20">
    	<el-col :span="12" class="graphical-num">
    		 <el-card class="graphical-num">
    			<ve-pie :data="consumerSex" class="Pie"></ve-pie>
    		</el-card>
    	</el-col>
    	<el-col :span="12" class="graphical-num">
    		 <el-card class="graphical-num">
    			<ve-histogram :data="SongStyle"></ve-histogram>
    		</el-card>
    	</el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {getCOUNTAll,getRelease,getvolume} from '@/api/dashboard'
export default {
  name: 'Dashboard',

  data(){
    return{
      Countlist:{},
      Release:"",
      volumeList:[],
      consumerSex: {
        columns: ['性别', '总数'],
        rows: [
          { '性别': '发布', '总数':0},
          { '性别': '未发布', '总数': 0 },
        ]
      },
      SongStyle: {
                    columns: ['排名', '总数'],
                    rows: [
                      { '排名': '华语', '总数':0},
                      { '排名': '粤语', '总数': 0 },
                      { '排名': '欧美', '总数':0},
                      { '排名': '日韩', '总数': 0 },
                      { '排名': '轻音乐', '总数':0},
                      { '排名': 'BGM', '总数': 0 },
                    ]
              }
    }
  },
  created() {
    this.getAll()
  },
  methods:{
    getAll(){
        getCOUNTAll().then(res=>{
         this.Countlist = res.data

          getRelease().then(res=>{
            this.Release = res.data.course
            this.consumerSex.rows[0]['总数'] = res.data.course
            this.consumerSex.rows[1]['总数'] = this.Countlist.coursecount-res.data.course
          })
        })
        getvolume().then(res=>{
          this.volumeList = res.data.list
          this.setSongStyle(res.data.list)
        })
        

    },
    setSongStyle(data){
      data.forEach((item,index)=>{
        console.log(item,index)
        this.SongStyle.rows[index]['排名']=item.title
        this.SongStyle.rows[index]['总数']=item.buyCount
      })
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.grid-content{
		width: 100%;
		height: 50px;
		text-align: center;
		color: darkgray;
		font-size: 14px;
	}
	.grid-num{
		font-size: 2em;
		font-weight: 400;
	}
	.graphical-num{
		border-radius: 50px;
	}
	.Pie{
		height: 100px;
	}
  .mgb20{
    margin-top: 10px;
  }
</style>
